<template>
  <div class="container">
    <input type="text" placeholder="请输入想要搜索的内容" @input="searchAction($event)">
    <div v-if="searchResult.length > 0">
      <div
        v-for="(item,index) in searchResult"
        :key="index"
        class="cartonranklist"
        @click="gotoContent(item.id)"
      >
        <div class="title">{{ item.title }}</div>
        <div class="midcontainer">
          <div class="author"></div>
          <div class="like" @click.once="addGameLike(item.id)"></div>
          <div class="likenums"> {{ item.likenums }} </div>
        </div>
        <div class="listbottom">
          <div class="poster">
            <img :src="'http://localhost:3007/uploads/'+item.poster" alt="">
          </div>
          <div class="text">{{ item.content }}</div>
        </div>
      </div>
    </div>
    <div v-else>
      <div
        v-for="(item,index) in gameranklist"
        :key="index"
        class="cartonranklist"
        @click="gotoContent(item.id)"
      >
        <div class="title">{{ item.title }}</div>
        <div class="midcontainer">
          <div class="author"></div>
          <div class="like" @click.once="addGameLike(item.id)"></div>
          <div class="likenums"> {{ item.likenums }} </div>
        </div>
        <div class="listbottom">
          <div class="poster">
            <img :src="'http://localhost:3007/uploads/'+item.poster" alt="">
          </div>
          <div class="text">{{ item.content }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { throttle } from '../libs/utils'
export default {
  data() {
    return {
      searchResult:[],
      gameranklist:[]
    }
  },
  created() {
    this.getGameRankinfo()
  },
  methods: {
    searchAction:throttle(function(e) {
      const inputValue = e.target.value
      this.searchResult = this.gameranklist.filter(item => {
        if(item.title.includes(inputValue)) {
          return item
        }
      })
    },1000),
    async getGameRankinfo() {
      const res = await this.$api.rank.getGameRankinfo()
      const { data:{ data:gameranklist } } = res
      this.gameranklist = [
        ...gameranklist
      ]
      console.log(this.gameranklist,'--------this.cartonranklist')
    },
    async addGameLike(data) {
      const gamerankid = { 'id':data }
      const res = await this.$api.rank.addGameLike(gamerankid)
      if(res.data.status !== 0) {
        alert('点赞失败!')
      }
      this.getGameRankinfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  position: absolute;
  width: 100%;
  height: 71.2%;
  padding: 20px 300px 0 300px;
  background-image: url('./images/gamerank_bg.png');
  background-size: 100% auto;
  background-position: 0 0;
  background-repeat: no-repeat;
  overflow: auto;
  color: #000;
  input {
    margin-bottom: 50px;
  }
  .cartonranklist {
    width: 1100px;
    margin-bottom: 50px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .3);
    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
    .title {
      font-size: 25px;
      font-weight: 600;
    }
    .midcontainer{
      display: flex;
      .author {
        margin-right: 900px;
      }
      .like {
      width: 30px;
      height: 30px;
      background-image: url('./images/addlike.png');
      background-size: 100% auto;
      z-index: 2;
      margin-right: 5px;
     }
     .likenums {
       font-size: 22px;
       line-height: 28px;
       font-weight: 600;
     }
    }
    .listbottom {
      display: flex;
      .poster {
        margin-right: 100px;
        img {
          width: 150px;
          height: 200px;
          margin-left: 20px;
          margin-bottom: 20px;
          margin-top: 20px;
        }
      }
      .text {
        margin-top: 50px;
      }
    }
  }
 }
</style>

